<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body>
    
<!-- 
    表格
    给table标签添加table类
    table-striped 条纹表格
    table-bordered 表格边框
    table-hover 悬停效果
    table-condensed  紧缩表格
    状态类：active  success  info  warning  danger
 -->

<div class="container">
    <table class="table table-striped table-bordered table-hover table-condensed">
        <tr>
            <th>编号</th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品类型</th>
            <th>商品描述</th>
            <th>操作</th>
        </tr>
        <tr class="success">
            <td>001</td>
            <td>火山飘雪</td>
            <td>78</td>
            <td>凉菜</td>
            <td>西红柿撒白糖</td>
        </tr>
        <tr class="info">
            <td>002</td>
            <td>蚂蚁上树</td>
            <td>58</td>
            <td>热菜</td>
            <td>肉末粉丝</td>
        </tr>
        <tr class="">
            <td>003</td>
            <td class="success">刀拍前男友</td>
            <td>48</td>
            <td>凉菜</td>
            <td class="warning">刀拍黄瓜</td>
        </tr>
        <tr class="danger">
            <td>004</td>
            <td>少女钻树林</td>
            <td>118</td>
            <td>热菜</td>
            <td>豆芽炒韭菜</td>
        </tr>
        <tr>
            <td>005</td>
            <td>太太乐</td>
            <td>99</td>
            <td>热菜</td>
            <td>韭菜鸡蛋</td>
        </tr>
    </table>
</div>

</body>
</html>